<template>
  <div class="choose_mod">
    <el-breadcrumb class="l_nav" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{classify==='classlist'?'选课中心':'体育用品'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="choose_condition">
      <dl v-for="item in natures" :key="item.id">
        <dt>{{item.name ||item.property}}：</dt>
        <dd v-for="i in item.detail" 
            :key="i.id"
            :class="{is_active:activeChoose[item.type] == i.name ||activeChoose[item.type] == i.type ||activeChoose[item.type] == i.property}"
            @click="choose(item.type,i.name,i.type,i.property)">
          {{i.name ||i.property}}
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
export default {
  props:['page'],
  data(){
    return{
      activeChoose:{},
      natures:[],
      classify:this.$route.path.slice(1),
      addr:{}
    }
  },
  watch:{
    $route(){
      if (this.$route.query.search) {
        this.search()
      }else{
        this.getList(this.activeChoose,this.addr.list)
      }
    },
    page(){
      this.getList(this.activeChoose,this.addr.list)
    }
  },
  mounted(){
    if (this.$route.query.search) {
      this.search()
      return;
    }
    //判断当前页面，选择发送商品或课程接口
    if (this.classify === 'classlist') {
      this.addr.mod = 'natures/show';
      this.addr.list = 'courses/show';
    }else if(this.classify === 'shoplist'){
      this.addr.mod = 'gnatures/show';
      this.addr.list =  'goods/show';
    }
    this.GLOBAL.request({
      baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
      url:this.addr.mod,
    }).then(({data:data})=>{
      this.natures = data 
      //初始化activeChoose
      data.forEach(item => {
          this.activeChoose[item.type] = item.detail[0].name || item.detail[0].property;
      }); 
    })
    this.getList(this.activeChoose,this.addr.list);
  },
  methods:{
    search(){
      this.GLOBAL.request({
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'goods/search',
        param:{
          content:this.$route.query.search,
          type:this.classify=='classlist'?'':1
        }
      }).then(({data:data})=>{
        if (!data.data.length) {
          this.$message({
            message:'没有查询到相关物品'
          })
        }else{
          this.$emit('searchList',data)
        }
      })
    },
    choose(type,name,star,property){
      let key = type,
          val = type ==='star'? star:name||property,
          obj = {};
          obj[key] = val;
      if (obj[key]==this.activeChoose[key]) {//重复点击不生效
        return;
      }
      this.activeChoose = Object.assign(this.activeChoose,obj)
      this.$forceUpdate()//强制刷新当前组件
      this.getList(this.activeChoose,this.addr.list)
    },
    getList(o,addr){//获取数据
      this.GLOBAL.request({
        method:'post',
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:addr+'?page='+this.page,
        data:o
      }).then(({data:data})=>{
        this.$emit('searchList',data)
      })
    }
  }
}
</script>
<style>
.choose_mod{
  margin:30px 0;
}
.l_nav{
  height:45px;
  line-height: 45px;
}
.choose_condition{
  width:1200px;
  box-sizing: border-box;
}
.choose_condition dl{
  display: flex;
  font-size: 14px;
  line-height: 22px;
  margin:12px 0;
  height:22px;
  font-family: '微软雅黑'
}
.choose_condition dl dt{
  font-size:14px;
  font-weight: bold;
}
.choose_condition dl dd{
  cursor: pointer;
  color:#999;
  padding:0 5px;
  margin-right: 10px;
  border-radius: 3px;
}
.choose_condition .is_active{
  background-color: #0078c5;
  color:#fff;
}
</style>
